<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>代码生成</title>
  <link rel="icon" type="image/png" th:href="@{/static/image/icon.ico}"/>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui-demo.css}">
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
  <style>
  	td .layui-form-select{
  		margin-top: -5px;
  		margin-right: -15px;
  	}
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div th:include="common/menu.html"></div>
  <div class="layui-body">
    <div style="padding: 15px;">
     <blockquote class="layui-elem-quote">
		代码生成
	 </blockquote>
		<form class="layui-form" action="" >
		   <input type="hidden" name="id" id="id">
		 <div class="layui-form-item">
		    <label class="layui-form-label">数据表选择</label>
		    <div class="layui-input-block" style="width: 250px">
		      <select name="table" lay-filter="tableList" >
				  <option value="">选择表</option>
				  <option th:each="tableName:${tableNameList}" th:value="${tableName}" th:text="${tableName}"></option>
			  </select> 
		      <input type="hidden" name="tableName"  lay-verify="tableName"  id="tableName">
   		 </div>
 		 </div>
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn" lay-submit="" lay-filter="tableSubmit" id="selectTable">确定选择</button>
		    </div>
		  </div>
		</form>
		注：表格里要显示的列，注释不能为空； 表格默认有表头、创建时间和编辑工具;
		<table class="layui-hide" id="table_id" lay-filter="table_lay"></table>
		<!-- 表单类型 -->
		<script type="text/html" id="columnEditTypeBar">
           <a class="layui-btn layui-btn-xs" data-field="columnEditType" value="input" lay-event="columnEditTypeSelect">表单类型 <i class="layui-icon layui-icon-down"></i></a>
	    </script>
		<script type="text/html" id="switchColumnShow">
  			<input type="checkbox" name="columnShow" value="1" lay-skin="switch" lay-text="显示|隐藏" lay-filter="columnShow" {{ d.columnShow == 1 ? 'checked' : '' }}}>
		</script>
		<script type="text/html" id="switchColumnSearch">
  			<input type="checkbox" name="columnSearch" value="{{d.columnSearch}}" lay-skin="switch" lay-text="是|否" lay-filter="columnSearch" {{ d.columnSearch == 1 ? 'checked' : '' }}>
		</script>
		<script type="text/html" id="switchColumnEdit">
  			<input type="checkbox" name="columnEdit" value="{{d.columnEdit}}" lay-skin="switch" lay-text="是|否" lay-filter="columnEdit" {{ d.columnEdit == 1 ? 'checked' : '' }}>
		</script>
		<div style="display: none" id="generate">
			<form class="layui-form" lay-filter="htmlSelect">
				<div class="layui-form-item">
				    <label class="layui-form-label">模块名称</label>
				    <div class="layui-input-block">
				      <input type="text"  id="title" lay-verify="title" autocomplete="off" placeholder="请输入模块名称" class="layui-input" style="width: 200px">
				    </div>
  				</div>
				<div class="layui-form-item" pane="">
				    <label class="layui-form-label">页面选择</label>
				    <div class="layui-input-block">
				      <input type="checkbox" name="htmlCheck" lay-skin="primary" value="1" title="生成HTML页面" checked="">
<!-- 				      <input type="checkbox" name="htmlCheck" lay-skin="primary" value="2" title="生成表格" checked=""> -->
				    </div>
		  		</div>
	  		</form>
	  		<shiro:hasPermission name="sysCodeGeneration:edit">
			<button type="button" class="layui-btn" id="generateButton">开始导出</button>
			</shiro:hasPermission>
		</div>
    </div>
  </div>
</div>
<script th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
//JavaScript代码区域
  layui.config({
        base: "../static/layui/lay/modules/"
    }).use(['element','form','jquery','table','dropdown'], function(){
  var element = layui.element;
  var form =layui.form;
  var $=layui.jquery;
  var table = layui.table;
  var dropdown = layui.dropdown; //下拉菜单
  var tableData;
  var tableName;
  form.on('select(tableList)', function(data){   
	$("#tableName").val(data.value); 
	tableName=data.value;
  });
  //确定表
  $("#selectTable").click(function(){
	  var tableName=$("#tableName").val();
	  tableShow(tableName);
	  $("#generate").attr("style","display:block");
  })
  function tableShow(tableName){
	   table.render({
	         elem: '#table_id'
	         ,width:1100
	         ,url: '/user/sysCodeGeneration/sysTableSelect.html?tableName='+tableName //数据接口
	         ,title: '数据表'
	         ,cols: [ 
	         	[
	         		 {type: 'numbers', title: '编号'}
	                 ,{field: 'columnTypeName', title: '数据库列类型'}
	                 ,{field: 'columnName', title: '数据库列名' }
	                 ,{field: 'columnEntityTypeName',edit: 'text',title:'实体属性类型'}
	                 ,{field: 'columnEntityName',edit: 'text',title:'实体属性名称'}
	                 ,{field: 'columnComment',edit: 'text',title:'注释'}
	                 ,{field: 'columnShow',title:'表格显示列',templet: '#switchColumnShow', unresize: true}
	                 ,{field: 'columnSearch',title:'关键词搜索',templet: '#switchColumnSearch', unresize: true}
	                 ,{field: 'columnEdit',title:'编辑字段',templet: '#switchColumnEdit', unresize: true}
	                 ,{field: 'columnEditType',title:'编辑字段类型',toolbar:"#columnEditTypeBar" , unresize: true}
	       		  ] 
	         	]
	          ,done: function(res, curr, count){
	         		    //如果是异步请求数据方式，res即为你接口返回的信息。
	         		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	         		   tableData=res;
	           }	
	       });
   }
  //监听单元格编辑
  table.on('edit(table_lay)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
  });
  // 监听工具行事件
  table.on('tool(table_lay)',function(obj){
	  var data=obj.data
	  ,layEvent=obj.event;
	    if(layEvent==='columnEditTypeSelect'){
	    	dropdown.render({
	   		 	elem: this //触发事件的 DOM 对象
	   	        ,show: true //外部事件触发即显示
	   	        ,data: [{
	   	          title: '输入框'
	   	          ,id: 'input'
	   	        },{
	   	          title: '复选框'
	   	          ,id: 'checkbox'
	   	        },{
	   	          title:'单选框'
	   	          ,id:'radio'
	   	        },{
	   	          title:'开关'
	   	          ,id:'switch'
	   	        },{
	   	          title:'文本域'
	   	          ,id:'textarea '
	   	        }]
	    	    ,click: function(menudata){
	    	    	$(".layui-table-click a[lay-event='columnEditTypeSelect']").text(menudata.title);
	    	    	$(".layui-table-click a[lay-event='columnEditTypeSelect']").attr("value",menudata.value);
	    	    	var index = obj.tr.attr("data-index");
	    	    	tableData.data[index].columnEditType=menudata.id;
	          	 }
	    	})
	    }
  });
  //监听列选择操作
  form.on('switch(columnShow)', function(obj){
  	//获取行下标
	var index  = obj.othis.parents('tr').attr("data-index");
	if(obj.elem.checked){
		tableData.data[index].columnShow=1;
	}else{
		tableData.data[index].columnShow=0;
	}
  }); 
  //监听搜索
  form.on('switch(columnSearch)', function(obj){
  	//获取行下标
	var index  = obj.othis.parents('tr').attr("data-index");
	if(obj.elem.checked){
		tableData.data[index].columnSearch=1;
	}else{
		tableData.data[index].columnSearch=0;
	}
   });
  //监听编辑
  form.on('switch(columnEdit)', function(obj){
  	//获取行下标
	var index  = obj.othis.parents('tr').attr("data-index");
	if(obj.elem.checked){
		tableData.data[index].columnEdit=1;
	}else{
		tableData.data[index].columnEdit=0;
	}
  });
  $("#generateButton").click(function(){
	  var title=$("#title").val();
	  var isHtml = new Array();
	  var columnShow = new Array();
      $("input:checkbox[name='htmlCheck']:checked").each(function(i){
    	  isHtml.push($(this).attr("value"));
      });
      isHtml=isHtml.join(",");
	  var title=$("#title").val();
	  tableData=JSON.stringify(tableData);
	  console.info(tableData);
	  $.ajax({
			  url:"/user/sysCodeGeneration/codeGenerate.html",
			  type:"POST",
		  	  data:{
		  		  	tableData:tableData,
					tableName:tableName,
					title:title,
					isHtml:isHtml
					},
		  	  success:function(result){
		  		  console.info(result.status);
		  		  if(result.status==200){
		  			  layer.msg('导出成功', {icon: 1});
		  		  }else{
		  			  layer.msg('导出失败，请重试', {icon: 2});
		  		  }
		  	   }
	  })
  })
  
});
</script>
</body>
</html>